<style scoped>
  .header{
    display: flex;
    flex-direction: column;
  }
  .head-top{
    width:100%;
    height:10px;
    background: transparent;
  }
  .head{
    height:50px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items:center;
    box-sizing: border-box;
  }
  .head-left{
    position: absolute;
    width:40px;
    height:60px;
    left:0;
    top:0;
    color: #7f7a8e;
    text-align: center;
  }
  .head-left h1{
    margin-top: 22px;
  }
  .head-right{
    position: absolute;
    right:10px;
    top:20px;
  }
  .content{
    width:100%;
    /*height:200px;*/
    position: relative;
  }
  .content>.img{
    width:100%;
    display: flex;
    align-items:center;
    justify-content: center;
    margin-bottom: 10px;
  }
  .content>.img>img{
    width:220px;
    height:210px;
    margin-right: 40px;
    z-index: 100;
  }
  .cg{
    position: absolute;
    right:0;
    bottom:50px;
    background: #FFD92D;
    padding:10px 16px 10px 34px;
    border-bottom-left-radius: 16px;
  }
  .cg>h1{
    color: #ffffff;
    font-weight:600;
    letter-spacing: 3px;
  }
  .check{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .check>p{
    padding:6px 10px;
    border: 1px solid #666;
    border-radius: 10px;
  }
  .other{
    width:100%;
    height:50px;
    background: #edf1f6;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .my-table ul{
    display: flex;
    flex-direction: column;
  }
  .my-table ul li{

    box-shadow: 0 1px 4px rgba(106,106,106,0.5);
    margin-top: 10px;
    padding:10px 0;
    margin: 16px 16px 0 16px;
    border-radius: 8px;
  }
  .my-table ul li>a{
    display: flex;
    justify-content: space-around;
  }
  .my-table ul li .first{
    color: #4990E2;
    border: 1px solid #4990E2;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:4px;
  }
  .my-table ul li .first>h3{
    color: #4990E2;
  }
  .my-table ul li .second{
    display: flex;
    flex-direction: column;
  }
  .my-table ul li .second>div{
    margin-top: 6px;
  }
  .my-table ul li .second>div small{
    border:1px solid #FE7A4A;
    color: #FE7A4A;
    border-radius: 4px;
    padding:0 4px;
  }
  .my-table ul li .second>div small:last-child{
    margin-left: 4px;
  }
  .my-table ul li .third{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .my-table ul li .third small{
    color: #666;
  }
  .my-table ul li .third>h3{
    color: #FF0F2C;
  }
  .my-table ul li.tuijian{
    color: #ffffff;
    background: -webkit-linear-gradient(left bottom,#6379F8,#91A5F8);
  }
  .my-table ul li.tuijian h3{
    color: #ffffff;
  }
  .my-table ul li.tuijian small{
    color: #ffffff;
  }
  .my-table ul li.tuijian .first{
    border-color: #ffffff;
  }
  .my-table ul li.tuijian .second small{
    color: #ffffff;
    border-color: #ffffff;
  }
</style>

<template>
  <div class="success">
    <div class="header">
      <div class="head">
        <div class="head-left" @click="goBack"><h1 class="iconfont icon-xiangzuo1"></h1></div>
        <div class="head-middle"></div>
        <div class="head-right"><h1 class="iconfont icon-liuyan"></h1></div>
      </div>
    </div>

    <div class="content">
      <div class="img">
        <img src="../assets/img/jiqi.png" alt="">
      </div>
      <div class="cg"><h1>跟单成功</h1></div>
      <div class="check">
        <p @click="check">查看已购组合</p>
        <p @click="backStore">返回超市</p>
      </div>
    </div>
    <div class="other">
      <div class="line"></div>
      <h3></h3>
      <p>你可能还想看以下组合</p>
      <div class="line"></div>
    </div>
    <div class="my-table">
      <ul>
        <li class="tuijian" v-for="all in allData" v-if="all.recommend===true">
          <router-link :to="{ path: '/subscribe', query: { id: all.id+'&'+all.country+all.index_name}}">
            <div class="first">
              <h3>{{all.sharp | toFixed}}</h3>
              <small>夏普比率</small>
            </div>
            <div class="second">
              <h3>{{all.country}}·{{all.index_name}}</h3>
              <div>
                <small>{{all.size_name}}</small>
                <small>{{all.feature}}</small>
              </div>
            </div>
            <div class="third">
              <h3>{{all.yr | percent}}%</h3>
              <small>近一年收益率</small>
            </div>
          </router-link>
        </li>
        <li v-else>
          <router-link :to="{ path: '/subscribe', query: { id: all.id}}">
            <div class="first">
              <h3>{{all.sharp | toFixed}}</h3>
              <small>夏普比率</small>
            </div>
            <div class="second">
              <h3>{{all.country}}·{{all.index_name}}</h3>
              <div>
                <small>{{all.size_name}}</small>
                <small>{{all.feature}}</small>
              </div>
            </div>
            <div class="third">
              <h3>{{all.yr | percent}}%</h3>
              <small>近一年收益率</small>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        allData: null
      }
    },
    mounted () {
      this.allData = this.$store.state.followSuccess
    },
    methods: {
      goBack () {
        this.$router.go(-1)
      },
      check () {
        this.$router.push({'path':'./income/monitor'})
      },
      backStore () {
        this.$router.push({'path':'./qstrategy/all'})
      }
    },
    filters: {
      percent (data) {
        if(data) {
          return (parseFloat(data) * 100).toFixed(2)
        } else {
          return 0
        }
      },
      toFixed (data) {
        if (data) {
          return (parseFloat(data)).toFixed(2)
        } else {
          return 0
        }
      }
    }
  }
</script>
